import React, { useRef } from "react";
import Backdrop from "../Backdrop/Backdrop";
import classes from "./Confirm.module.css";

function Confirm(props) {
    const ConfirmRef = useRef();
    const confirmtextRef = useRef();

    return (
        <Backdrop
            onClick={(e) => {
                props.onCancel(e, ConfirmRef, confirmtextRef);
            }}
            className={classes.confirmOuter}
        >
            <div className={classes.confirm} ref={ConfirmRef}>
                <p className={classes.confirmtext} ref={confirmtextRef}>
                    {props.confirmText}
                </p>
                <div>
                    <button
                        className={classes.cancel}
                        onClick={(e) => {
                            props.onCancel(e);
                        }}
                    >
                        取消
                    </button>
                    <button
                        className={classes.ok}
                        onClick={(e) => {
                            props.onOk(e);
                        }}
                    >
                        确定
                    </button>
                </div>
            </div>
        </Backdrop>
    );
}

export default Confirm;
